<!--
* @description 重大问题
* @author zywu
* @date 2020/12/14 15:26:45
!-->
<template>
  <div class="section section-base section-trouble">
    <div class="font24 colorYellow">重大问题</div>
    <div style="padding-top: 20px;">
      <div class="font20">全年重大问题共</div>
      <div class="flex-start" style="align-items: baseline;margin-top: 20px;">
        <count-to class="font40" :startVal="0" :endVal="dataCount" :duration="3000"></count-to>
        <div>个</div>
      </div>
      <!-- <div class=" font20 opacityColor">其中，“某某某”被提及了88次</div> -->
      <!-- 重大问题 start -->
      <div style="width: 15px;height: 3px;background-color:#FD7676;position: absolute;margin-top: 80px;margin-left: calc(50% - 115px);"></div>
      <div style="position: absolute;margin-top: 73px;margin-left: calc(50% - 95px);font-size: 12px;">最大值</div>
      <div style="width: 15px;height: 3px;background-color:#7DA5E6;position: absolute;margin-top: 80px;margin-left: calc(50% - 10px);"></div>
      <div style="position: absolute;margin-top: 73px;margin-left: calc(50% - -10px);font-size: 12px;">最小值</div>
      <!-- 重大问题 end -->
    </div>
    <div style="position: relative;" id="page_6">
      <div id="page_6_category" style="width:100%;height:100%;margin-top: 30px;"></div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  props: {
    reportData: {
      type: Object,
      default: function () {
        return {
          joinTime: {},
        }
      },
    },
    active: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      dataList: [],
      dataCount: 0,
    }
  },
  watch: {
    active(val) {
      if (val) {
        this.$nextTick(() => {
          this.dataCount = this.reportData.importantQuestion.count
          this.dataList = this.reportData.importantQuestion.dataList
          this.getCategoryProblem()
        })
      }
    },
  },
  methods: {
    getCategoryProblem() {
      let myChartLine = echarts.init(document.getElementById('page_6_category'))
      let lineData1 = []
      let categoryDataY = this.dataList.map((item) => {
        return item.count
      })
      let maxItem = Math.max(...categoryDataY)
      let minItem = Math.min(...categoryDataY)
      let categoryDataX = this.reportData.highRiskFireSignal.dataList.map(
        (item, index, arr) => {
          if (index == arr.length - 1 || arr.length == 1) {
            return item.month + '月'
          } else {
            return item.month
          }
        }
      )
      for (var i = 0; i < 12; i++) {
        lineData1.push(maxItem + 1)
      }
      // option
      let option = {
        title: {
          text: '各月重大问题数量统计',
          left: 'center',
          top: 0,
          textStyle: { color: '#ffffff' },
        },
        tooltip: {
          show: false,
          trigger: 'axis',
          axisPointer: {
            label: {
              show: true,
              backgroundColor: '#333',
            },
          },
        },
        grid: {
          top: '30%',
          left: '0%',
          right: '0%',
        },
        xAxis: {
          data: categoryDataX,
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: '#ccc',
            },
          },
          axisLabel: {
            interval: 0,
            fontSize: 12,
            color: 'white',
          },
        },
        yAxis: {
          show: false,
          splitLine: { show: false },
          axisLine: {
            show: false,
            lineStyle: {
              color: '#ccc',
            },
          },
        },
        series: [
          {
            name: 'bar',
            type: 'bar',
            barGap: '-100%',
            barWidth: 10,
            itemStyle: {
              normal: {
                barBorderRadius: 5,
                // color: new echarts.graphic.LinearGradient(
                //     0, 0, 0, 1,
                //     [
                //         { offset: 0, color: '#FFD986' }
                //     ]
                // ),
                color: function (params) {
                  var c = ''
                  if (params.value == maxItem) {
                    c = '#FD7676'
                  } else if (params.value == minItem) {
                    c = '#7DA5E6'
                  } else {
                    c = '#FFD986'
                  }
                  return c
                },
                label: {
                  show: true, //开启显示
                  position: 'top', //在上方显示
                  textStyle: {
                    //数值样式
                    color: 'white',
                    fontSize: 10,
                  },
                },
              },
            },
            data: categoryDataY,
          },
          {
            name: 'line',
            type: 'bar',
            barGap: '-100%',
            barWidth: 10,
            itemStyle: {
              normal: {
                barBorderRadius: 5,
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: '#C34340' },
                ]),
              },
            },
            z: -12,
            data: lineData1,
          },
        ],
      }
      myChartLine.clear()
      myChartLine.setOption(option)
    },
  },
  mounted() {},
}
</script>